﻿@{
    ViewBag.Title = "Trang chủ";
}

@helper GetImage(Biz.Product p)
{
    if (p.Images.Count > 0)
    {
        @p.Images[0].Image;
    }
}

@section scripts {
    <script>
        $(document).ready(function () {

            //Speed of the slideshow
            var speed = 5000;

            //You have to specify width and height in #slider CSS properties
            //After that, the following script will set the width and height accordingly
            $('#mask-gallery, #gallery li').width($('#slider').width());
            $('#gallery').width($('#slider').width() * $('#gallery li').length);
            $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

            //Assign a timer, so it will run periodically
            var run = setInterval('newsscoller(0)', speed);

            $('#gallery li:first, #excerpt li:first').addClass('selected');

            //Pause the slidershow with clearInterval
            $('#btn-pause').click(function () {
                clearInterval(run);
                return false;
            });

            //Continue the slideshow with setInterval
            $('#btn-play').click(function () {
                run = setInterval('newsscoller(0)', speed);
                return false;
            });

            //Next Slide by calling the function
            $('#btn-next').click(function () {
                newsscoller(0);
                return false;
            });

            //Previous slide by passing prev=1
            $('#btn-prev').click(function () {
                newsscoller(1);
                return false;
            });

            //Mouse over, pause it, on mouse out, resume the slider show
            $('#slider').hover(

                function () {
                    clearInterval(run);
                },
                function () {
                    run = setInterval('newsscoller(0)', speed);
                }
            );

        });


        function newsscoller(prev) {

            //Get the current selected item (with selected class), if none was found, get the first item
            var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
            var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

            //if prev is set to 1 (previous item)
            if (prev) {

                //Get previous sibling
                var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
                var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

                //if prev is set to 0 (next item)
            } else {

                //Get next sibling
                var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
                var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
            }

            //clear the selected class
            $('#excerpt li, #gallery li').removeClass('selected');

            //reassign the selected class to current items
            next_image.addClass('selected');
            next_excerpt.addClass('selected');

            //Scroll the items
            $('#mask-gallery').scrollTo(next_image, 800);
            $('#mask-excerpt').scrollTo(next_excerpt, 800);

        }
    </script>
}

@section slider {
    <!-- slider -->
    <div class="slider-holder">
        <div class="slider-frame">
            <div id="slider">
                <div id="mask-gallery">
                    <ul id="gallery">
                        <li>
                            <img src="/Images/Products/img2.png" width="438" height="342" alt="" /></li>
                        <li>
                            <img src="/Images/Products/img2.png" width="438" height="342" alt="" /></li>
                    </ul>
                </div>
                <div id="mask-excerpt">
                    <ul id="excerpt">
                        <li>
                            <h2>Telephone Galaxy Axe</h2>
                            <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo </p>
                            <div class="btns-holder">
                                <a href="item.html" class="more">Detail</a>
                                <a href="cart.html" class="more">Add to cart</a>
                            </div>
                            <!-- span class="logo-sams-android">samsung android</span -->
                        </li>
                        <li>
                            <h2>Some text</h2>
                            <p>Back behind your desk this morning? A very Happy New Year to all of you - here's to an awesome 2012! ^IY </p>
                            <div class="btns-holder">
                                <a href="item.html" class="more">Detail</a>
                                <a href="cart.html" class="more">Add to cart</a>
                            </div>
                            <!-- span class="logo-sams-android">samsung android</span -->
                        </li>
                    </ul>
                </div>
                <div id="buttons">
                    <a href="#" id="btn-prev">prev</a>
                    <a href="#" id="btn-next">next</a>
                </div>
            </div>
        </div>
    </div>
}

<!-- main-content -->
<div class="main-holder">
    <div class="main-frame">
        <div id="content">
            <!-- content -->
            <div class="content">
                <!-- social-networks -->
                <ul class="social-networks">
                    <li><a href="#" class="facebook">facebook</a></li>
                    <li><a href="#" class="gmail">gmail</a></li>
                    <li><a href="#" class="rss">rss</a></li>
                    <li><a href="#" class="twitter">rwitter</a></li>
                    <li><a href="#" class="social-link">social-link</a></li>
                </ul>
                <div class="box">
                    <h2>Sản phẩm mới</h2>
                    <div class="holder">
                        <div class="frame-box">
                            <div class="blocks-holder">
                                @foreach (var p in ViewBag.Products)
                                {
                                    <div class="block">
                                        <figure>
                                            <img src="/Images/Products/@GetImage(p)" width="183" height="135" alt="" />
                                            <h3><a href="/Product/Detail/@p.Id">@p.Name</a></h3>
                                            @{string html = String.Format("{0:C}", p.CurrentPrice);}
                                            <span class="price">@html.Replace('$',' ') VNĐ</span>
                                        </figure>
                                        <div class="btns-holder">
                                            @if (@p.GetQuantity() <= 0)
                                            { 
                                                @:<a href="#" class="add">hết hàng</a>
                                            }
                                            @if (@p.GetQuantity() > 0)
                                            { 
                                                @:<a href="/Cart/AddToCart/@p.Id" class="add">Giỏ hàng</a>
                                            }
                                            <a href="/Product/Detail/@p.Id" class="detail">Chi tiết</a>
                                        </div>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <h2>Nổi bật</h2>
                    <div class="holder">
                        <div class="frame-box">
                            <div class="carousel G4">
                                <div class="frame">
                                    <ul class="bloks-holder">
                                        
                                            @foreach (var p in ViewBag.FeaturedList)
                                            {
                                                <li>
                                                <div class="block">
                                                    <figure>
                                                        <img src="/Images/Products/@GetImage(p)" width="183" height="135" alt="" />
                                                        <h3><a href="/Product/Detail/@p.Id">@p.Name</a></h3>
                                                        <span class="price">@p.CurrentPrice</span>
                                                    </figure>
                                                    <div class="btns-holder">
                                                        @if (@p.GetQuantity() <= 0)
                                                        { 
                                                            @:<a href="#" class="add">hết hàng</a>
                                            }
                                                        @if (@p.GetQuantity() > 0)
                                                        { 
                                                            @:<a href="/Cart/AddToCart/@p.Id" class="add">Giỏ hàng</a>
                                            }
                                                        <a href="/Product/Detail/@p.Id" class="detail">Chi tiết</a>
                                                    </div>
                                                </div>
                                                </li>
                                            }
                                        
                                    </ul>
                                </div>
                                <div class="btns-subholder">
                                    <a href="#" class="link-prev">prev</a>
                                    <a href="#" class="link-next">next</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- aside -->
            <aside id="sidebar">
                @*@Html.Partial("~/Views/Product/__CategoriesMenu.cshtml")*@
                @Html.Action("__CategoriesMenu", "Product")
                <div class="box">
                    <h2>Hãng nổi bật</h2>
                    <div class="holder">
                        <div class="frame-box">
                            <ul class="tags-cloud">
                                <li><a href="#">Samsung</a></li>
                                <li><a href="#">Nokia</a></li>
                                <li><a href="#">Oli</a></li>
                                <li><a href="#">Apple</a></li>
                                <li><a href="#">Panasonic</a></li>
                                <li><a href="#">HTC devices</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</div>
